<template>
  <div class="container">
    <!-- <el-page-header @back="goBack" content="预定信息"> </el-page-header> -->
    <!-- <div class="submitButtom">
      <el-button
        type="primary"
        style="margin-left: 10%; width: 80%"
        @click="agreeMeetingApply"
        >确认修改，并同意该会议室申请</el-button
      >
    </div> -->
    <!-- <div> -->
    <div class="TimeDiv">
      <!-- <el-divider>会议预定信息</el-divider> -->
      <el-date-picker
        style="margin-left: 3%; width: 44%"
        v-model="form.预订日期"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        disabled
      >
      </el-date-picker>
    </div>
    <div class="TimeDiv">
      <div style="display: inline-block; margin-left: 3%; width: 44%">
        <el-select
          v-model="form.开始时间"
          placeholder="起始时间"
          @change="getEndTimeList"
        >
          <el-option
            v-for="item in startTimeList"
            :key="item.时间"
            :label="item.时间"
            :value="item.时间"
          >
          </el-option>
        </el-select>
      </div>
      <div style="display: inline-block; width: 6%; text-align: center">至</div>
      <div style="display: inline-block; width: 44%">
        <el-select v-model="form.结束时间" placeholder="结束时间">
          <el-option
            v-for="item in endTimeList"
            :key="item.时间"
            :label="item.时间"
            :value="item.时间"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="TimeDiv" style="text-align: center">
      <el-button type="primary" style="width: 86%" @click="agreeMeetingApply"
        >确认修改，并同意该会议室申请</el-button
      >
    </div>

    <div class="DateDiv" id="tagTime">
      <el-tag
        style="
          width: 46%;
          margin-left: 2%;
          margin-right: 2%;
          text-align: center;
        "
        v-for="(item, index) in timeTagList"
        :key="index"
        :type="item.type"
        effect="dark"
      >
        {{ item.name }}
        {{ item.illustrate }}
      </el-tag>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import MyTools from '../../assets/js/MyTools.js';
export default {
  data () {
    return {
      valueDate: '',
      startTimeList: [],
      endTimeList: [],
      timeTagList: [],
      startTime: '',
      endTime: '',
      form: {},
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === "ExamineCRDetail") {
      next((vm) => {
        vm.form = from.params.info
        vm.getStartTimeList();
        vm.getEndTimeList();
        vm.getMeetingTimeInfo();
      })
    }
    else {
      next()
    }
  },
  // beforeRouteLeave (to, from, next) { // 仅适用于本页面不作为H5着陆页的情况
  //   var skuShow = true
  //   if (!this.form.预订日期 || this.form.预订日期 === '') {
  //     this.$message.warning('预订日期不能为空');
  //     skuShow = false
  //   }
  //   if (!this.form.开始时间 || this.form.开始时间 === '') {
  //     this.$message.warning('会议开始时间不能为空');
  //     skuShow = false
  //   }
  //   if (!this.form.结束时间 || this.form.结束时间 === '') {
  //     this.$message.warning('会议结束时间不能为空');
  //     skuShow = false
  //   }

  //   if (!skuShow) {
  //     this.$store.commit('SET_SKU_SHOW', false)
  //     next(false)
  //   } else {
  //     from.params.开始时间 = this.form.开始时间;
  //     from.params.结束时间 = this.form.结束时间;
  //     next()
  //   }
  // },
  beforeRouteLeave (to, from, next) {
    this.form = {}
    next()
  },
  mounted () {
    var height = MyTools.getWid_Hei().height - 5
    setTimeout(() => {
      var tagTime = document.getElementById('tagTime')
      tagTime.style.height = height + 'rem';
    }, 500);
  },
  methods: {
    async agreeMeetingApply () {
      const _self = this;
      var isAbleC = true
      if (!this.form.预订日期 || this.form.预订日期 === '') {
        this.$message.warning('预订日期不能为空');
        isAbleC = false
      }
      if (!this.form.开始时间 || this.form.开始时间 === '') {
        this.$message.warning('会议开始时间不能为空');
        isAbleC = false
      }
      if (!this.form.结束时间 || this.form.结束时间 === '') {
        this.$message.warning('会议结束时间不能为空');
        isAbleC = false
      }
      if (isAbleC) {
        await this.$Http.post('ConferenceRoom/AgreeMeetingApplyAndUpdateTime', this.form).then(res => {
          if (res.data.IsSucess) {
            this.$message.success('审核提交完成');
            _self.goBack()
          } else {
            this.$message.error('审核提交失败，' + res.data.Message);
          }
        }).catch(
          err => console.log(err)
        );
      }
    },
    goBack () {
      this.$router.go(-2);
    },
    async getMeetingTimeInfo () {
      var url = 'ConferenceRoom/GetMeetingTimeInfo?VID=0&RoomID='+this.form.ROOM_ID + '&OrderID=' + this.form.ID + '&Date=' + this.form.预订日期
      const { data } = await this.$Http.get(url)
      this.originalData = []
      data.forEach(element => {
        if (element.时间段.slice(-2) === '00') {
          element.name = element.时间段 + ' - ' +
            element.时间段.substr(0, 3) + '30'
        } else if (element.时间段.slice(-2) === '30') {
          element.name = element.时间段 + ' - ' +
            element.时间段.substring(0, 1) + (parseInt(element.时间段[1]) + 1).toString() + ':00'
        }

        if (element.预订状态 === '0') {
          element.type = 'info'
          element.illustrate = '已预订'
        } else if (element.预订状态 === '-1') {
          element.type = 'danger'
          element.illustrate = '不可预订'
        } else if (element.预订状态 === '1') {
          element.type = ''
        }
        this.originalData.push(element)
      });
      this.timeTagList = this.originalData
    },
    async getStartTimeList () {
      const { data } = await this.$Http.get('ConferenceRoom/GetMeetingApplyTimeInfo?VID=0&RoomID='+this.form.ROOM_ID + '&OrderID=' + this.form.ID + '&Date=' + this.form.预订日期 + '&Type=0&BeginTime=')
      this.startTimeList = data
    },
    async getEndTimeList () {
      // this.form.结束时间 = ''
      const { data } = await this.$Http.get('ConferenceRoom/GetMeetingApplyTimeInfo?VID=0&RoomID='+this.form.ROOM_ID + '&OrderID=' + this.form.ID + '&Date=' + this.form.预订日期 + '&Type=1&BeginTime=' + this.form.开始时间)
      this.endTimeList = data
    },
  }
}
</script>

<style lang="scss" scoped>
.submitButtom {
  position: fixed;
  bottom: 0.2rem;
  width: 100%;
  height: 1.5rem;
}
.TimeDiv {
  font-size: 25px;
  height: 1.5rem;
  padding-top: 0.2rem;
  width: 100%;
}
.DateDiv {
  margin-left: 5%;
  padding-bottom: 200px;
  width: 90%;
  overflow: auto;
  height: 0rem;
}
/* 隐藏滚动条 */
.DateDiv::-webkit-scrollbar {
  display: none;
}
</style>
